<!DOCTYPE html>

<html>
<head>
    <title></title>

    <script type="text/javascript">
        function toggleClass( el, cls ) {
            var re = new RegExp( '\\b' + cls + '\\b' );
            if( re.test( el.className ) ) {
                el.className = el.className.replace( re, '' );
            } else {
                el.className += ' ' + cls;
            }
        }

        function log( txt ) {
            var el = log._el;
            if(!el) {
                el =log._el = document.createElement( 'div' );
                el.style.position = 'absolute';
                el.style.bottom = '1em';
                el.style.right = '1em';
                el.style.width = '200px';
                el.style.height = '100px';
                el.style.overflow = 'auto';
                el.style.background = '#FFF';
                el.style.border = '1px solid #EEE';
                el.style.fontSize = '9px';
                document.body.appendChild( el );
            }
            var item = document.createElement( 'div' );
            item.appendChild( document.createTextNode( txt ) );
            el.appendChild( item )
        }

        function animate( el, fromX, fromY, toX, toY ) {
            el.style.position = 'absolute';
            var i = 0;

            function step() {
                el.style.left = fromX + ( toX - fromX ) * i / 100 + 'px';
                el.style.top = fromY + ( toY - fromY ) * i / 100 + 'px';
                i++;
                if( i < 100 ) {
                    setTimeout( step, 10 );
                }
            }

            step();
        }
    </script>

    <style>

        body {
            /*background:url(border.png);*/
        }

        .shadow {
            behavior: url(../build/PIE.htc);
            background: #EEE;
            float: left;
            padding: 50px;
            margin: 10px;
        }
        #test1 {
            box-shadow: #000 0 0 3px;
            -moz-box-shadow: #000 0 0 3px;
            -webkit-box-shadow: #000 0 0 3px;
        }
        #test2 {
            box-shadow: #000 0 0 5px;
            -moz-box-shadow: #000 0 0 5px;
            -webkit-box-shadow: #000 0 0 5px;
        }
        #test3 {
            box-shadow: #000 0 0 8px;
            -moz-box-shadow: #000 0 0 8px;
            -webkit-box-shadow: #000 0 0 8px;
        }
        #test4 {
            box-shadow: #000 0 0 10px;
            -moz-box-shadow: #000 0 0 10px;
            -webkit-box-shadow: #000 0 0 10px;
        }
        #test5 {
            clear: both;
            float: none;
            -moz-border-radius: 20px 20px 30px / 10px 20px 30px 40px;
            -webkit-border-radius: 20px 20px 30px / 10px 20px 30px 40px;
            border-radius: 20px 20px 30px / 10px 20px 30px 40px;
            box-shadow: #000 0 0 8px;
            -moz-box-shadow: #000 0 0 8px;
            -webkit-box-shadow: #000 0 0 8px;
        }
        #test6 {
            clear: both;
            -moz-border-radius: 100%;
            -webkit-border-radius: 100%;
            border-radius: 100%;
            box-shadow: #000 0 0 20px;
            -moz-box-shadow: #000 0 0 20px;
            -webkit-box-shadow: #000 0 0 20px;
        }
        #test6.classed {
            border-radius: 25%;
            -moz-border-radius: 25%;
            -webkit-border-radius: 25%;
            background-color: #CEF;
        }

        #test7 {
            clear: both;
            -moz-border-radius: 100%;
            -webkit-border-radius: 100%;
            border-radius: 100%;
            box-shadow: #000 0 0 20px;
            -moz-box-shadow: #000 0 0 20px;
            -webkit-box-shadow: #000 0 0 20px;
            -pie-watch-ancestors: 2;
        }
        .classed #test7 {
            -moz-border-radius: 25%;
            -webkit-border-radius: 25%;
            border-radius: 25%;
            background-color: #CEF;
        }

        #test8 {
            clear: both;
            width: 100px;
            height: 50px;
            padding: 10px;
            text-align: center;
            -moz-border-radius: 20px 40px;
            -webkit-border-radius: 20px 40px;
            border-radius: 20px 40px;
            box-shadow: #000 0 0 5px;
            -moz-box-shadow: #000 0 0 5px;
            -webkit-box-shadow: #000 0 0 5px;
        }
        #test8.changed {
            -moz-border-radius: 20px 80px;
            -webkit-border-radius: 20px 80px;
            border-radius: 20px 80px;
        }

        #test9 {
            clear: both;
            width: 40%;
            -moz-border-radius: 20px 40px;
            -webkit-border-radius: 20px 40px;
            border-radius: 20px 40px;
            background: #EEE url(border.png) repeat 50% 50%;
            box-shadow: #000 0 0 10px;
            -moz-box-shadow: #000 0 0 10px;
            -webkit-box-shadow: #000 0 0 10px;
            border: 1px dotted;
        }

        #test10 {
            clear: both;
            width: 40%;
            -moz-border-radius: 20px;
            -webkit-border-radius: 20px;
            border-radius: 20px;
            border-width: 6px;
            border-color: red green blue black;
            border-style: dashed dotted solid double;
            background: #EEE url(border.png);
            box-shadow: #000 0 0 10px;
            -moz-box-shadow: #000 0 0 10px;
            -webkit-box-shadow: #000 0 0 10px;
        }

        #test11 {
            clear: both;
            width: 80%;
            background: transparent;
            border-width: 20px;
            border-bottom-width: 30px;
            border-image: url(border.png) 27 stretch;
            -moz-border-image: url(border.png) 27 stretch;
            -webkit-border-image: url(border.png) 27 stretch;
        }

        #test12 {
            clear: both;
            margin: 50px;
            background: url(border.png);
            padding: 40px;
        }
        #test12 div {
            behavior: url(../build/PIE.htc);
            background: #EEE;
            -moz-box-shadow: rgba(0,0,0,0.5) 10px 10px 0;
            -webkit-box-shadow: rgba(0,0,0,0.5) 10px 10px 0;
            box-shadow: rgba(0,0,0,0.5) 10px 10px 0;
            position: relative;
        }

        #test13 {
            clear: both;
            background: #EEE;
            border-radius: 10px;
            -moz-border-radius: 10px;
            -webkit-border-radius: 10px;
            border: 1px solid;
            position: relative;
        }
        #test13:hover {
            border-radius: 30px / 20px;
            -webkit-border-radius: 30px 20px;
            -moz-border-radius: 30px / 20px;
            background: url(border.png);
            border: 4px dotted blue;
            left: 20px;
            width: 50%;
            -webkit-box-shadow: blue 0 0 10px;
            -moz-box-shadow: blue 0 0 10px;
            box-shadow: blue 0 0 10px;
        }


    </style>
</head>
<body>

    <div id="test1" class="shadow">test 1 <a href="misc-tests.html#" onclick="animate(this.parentNode, 20, 20, 400, 400)">anim</a></div>
    <div id="test2" class="shadow">test 2</div>
    <div id="test3" class="shadow">test 3</div>
    <div id="test4" class="shadow">test 4</div>
    <div id="test5" class="shadow">box shadow w/rounded corners <button onclick="this.parentNode.appendChild( document.createTextNode(' ... some extra text ... some extra text  ... some extra text ... some extra text ') )">enlarge</button> </div>
    <div id="test6" class="shadow">test 6
        <button onclick="toggleClass(this.parentNode, 'classed')">Toggle className</button>
    </div>

    <div id="test7cont">
        <div>
            <div id="test7" class="shadow">test 7
                <button onclick="toggleClass(document.getElementById('test7cont'), 'classed')">Toggle parent className</button>
            </div>
        </div>
    </div>

    <div class="shadow" id="test8">test 8 <button onclick="toggleClass(this.parentNode, 'changed')">change</button></div>
    <div class="shadow" id="test9">test 9</div>

    <div class="shadow" id="test10">test 10</div>
    <div class="shadow" id="test11">test 11</div>
    <div id="test12"><div>test 12 - rgba color for box-shadow</div></div>

    <div class="shadow" id="test13">test 13 - :hover</div>

</body>
</html>